<template>
    <el-table
      :data="tableData1"
      style="width: 100%; margin-bottom: 20px"
      row-key="organizationId"
      :header-cell-style="{background:'#f4f3f9',color:'#606266', fontSize: '12px'}"
      :cell-style = "{fontSize: '12px'}"
      border
      default-expand-all
    >
      <el-table-column prop="organizationName" label="部门" sortable />
      <el-table-column prop="code" label="编号" sortable />
      <el-table-column label="操作" align="right">
        <template #default="scope">
            <el-button @click="addDept(scope.row)" size="small" type="primary">添加部门</el-button>
        </template>
      </el-table-column>
    </el-table>
  <el-pagination
    small="true"
    background
    layout="prev, pager, next"
    :page-size="5"
    :total="total"
    :current-page="currentPage"
    @current-change="changePage"
    style="margin-top: 30px;">
  </el-pagination>
  <el-drawer
    title="编辑"
    v-model="drawer"
    v-show="drawer"
    :lock-scroll="false"
    :with-header="true">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="id" v-show="false">
          <el-input v-model="formLabelAlign.departId"></el-input>
        </el-form-item>
        <el-form-item label="上级部门">
          <el-input v-model="formLabelAlign.pDepartment" required disabled></el-input>
        </el-form-item>
        <el-form-item label="部门名称">
          <el-input v-model="formLabelAlign.newDepartment" required></el-input>
        </el-form-item>
          <el-form-item label="部门编号">
          <el-input v-model="formLabelAlign.code" required></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
  </el-drawer>
</template>
<script>
import { getDepartment, addDepartment } from "../api/department.js"
export default {
  data() {
    return {
      tableData: [
      ],
      search: "",
      drawer: false,
      labelPosition: 'left',
      formLabelAlign: {
        pDepartment: '',
        departId: '',
        newDepartment: '',
        code: ''
      },
      queryParams: {
        page: 1,
        size: 5
      },
      total: '',
      currentPage: 1,
      searchInput: '',
      tableData1: [{
            id: 0,
            date: '2016-05-03',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
            children: [
                {
                    id: 1,
                    date: '2016-05-02',
                    name: 'wangxiaohu',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    id: 2,
                    date: '2016-05-04',
                    name: 'wangxiaohu',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    id: 3,
                    date: '2016-05-01',
                    name: 'wangxiaohu',
                    address: 'No. 189, Grove St, Los Angeles',
                    children: [
                    {
                        id: 31,
                        date: '2016-05-01',
                        name: 'wangxiaohu',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                        id: 32,
                        date: '2016-05-01',
                        name: 'wangxiaohu',
                        address: 'No. 189, Grove St, Los Angeles',
                    },
                    ],
                },
                {
                    id: 4,
                    date: '2016-05-03',
                    name: 'wangxiaohu',
                    address: 'No. 189, Grove St, Los Angeles',
                }
            ]
        }]
    };
  },
  methods: {
    addDept(row) {
      this.drawer = true;
      this.formLabelAlign.pDepartment = row.organizationName;
      this.formLabelAlign.departId = row.code;
    },
    async getDepartment() {
      this.queryParams.user = localStorage.getItem("user");
      let result = await getDepartment(this.queryParams);
      if(result.data.status == 'ok') {

        this.tableData1 = result.data.departments;
      }
      console.log(this.tableData1);

    },
    editUser(row) {
      this.formLabelAlign.userName = row.user_name;
      this.formLabelAlign.cardId = row.card_id;
      this.formLabelAlign.address = row.address;
      this.formLabelAlign.phone = row.phone;
      this.formLabelAlign.subdistrict = row.subdistrict;
      this.formLabelAlign.building = row.building;
      this.formLabelAlign.block = row.block;
      this.formLabelAlign.room = row.room;
      this.formLabelAlign.id = row.id;
      this.drawer = true
    },
    async onSubmit() {
      let result = await addDepartment(this.formLabelAlign);
      if(result.data.status == "ok") {
        this.drawer = false;
        this.getDepartment();
      }
    },
    changePage(e) {
      this.currentPage = e;
      this.queryParams.page = e;
      this.getUserList();
    },
    async searchData() {
      console.log(this.searchInput);
      let result = await search({'search': this.searchInput});
      if(result.data.status == 'ok') {
        this.tableData = result.data.userList;
      }
    },
    async exportData() {
      let userName = localStorage.getItem("user");
      let result = await exportFile(userName);
      console.log(result);
    }
  },
  mounted() {
    this.getDepartment();
  }
};
</script>
<style scoped>
</style>